<template>
  <div class="default">
    <img src="../../assets/dafault/noPower.png" alt="" />
    <p>您的账号权限已到期！</p>
    <div class="btn">
      <button @click="show = true">续费开通</button>
    </div>
    <!-- 弹框 -->
    <van-dialog v-model="show" :show-confirm-button="false">
      <template #title>
        <h3>续费充值</h3>
        <van-icon name="cross" @click="show = false" />
      </template>
      <template #default>
        <div class="cont">
          <div class="main-items">
            <div
              :class="{ 'main-item': true, hover: money == index + 2 }"
              v-for="(item, index) in moneys"
              :key="index"
              @click="getMoney(item.money)"
            >
              <img :src="item.image" alt="" />
              <span>{{ item.text }}</span>
            </div>
          </div>
          <div class="contents">
            <span>支付方式</span>
            <div class="wxbtn">
              <van-radio-group v-model="checked" direction="horizontal">
                <van-radio name="1">
                  <img src="../../assets/images/wallet/weixin.png" alt="" />
                  <span>微信支付</span>
                </van-radio>
              </van-radio-group>
            </div>
          </div>
          <div class="tixianshuoming">
            <span>充值须知</span>
            <div class="bottom">
              <i></i>
              <p>
                用户在确认进行充值前应仔细确认过自己的账号并仔细选择了相关操作选
                项，若因用户自身输入账号错误、
                操作不当或不了解充值计费方式等造成
                充错账号、错选充值种类等情形而损害自身权益的，
                优联互通将不会作出 任何补偿或赔偿
              </p>
            </div>
          </div>
          <van-divider />
          <div class="foot">
            <button @click="open">立即开通</button>
          </div>
        </div>
      </template>
    </van-dialog>
  </div>
</template>

<script>
export default {
  name: "default",
  data() {
    return {
      show: false,
      moneys: [
        {
          image: require("../../assets/images/wallet/jinbi.png"),
          text: "9.9元/周",
          money: 2,
        },
        {
          image: require("../../assets/images/wallet/jinbi.png"),
          text: "29.8元/月",
          money: 3,
        },
        {
          image: require("../../assets/images/wallet/jinbi.png"),
          text: "298元/年",
          money: 4,
        },
      ],
      checked: "1",
      money: 2,
      data: {},
    };
  },
  //生命周期 - 创建完成（访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（访问DOM元素）
  mounted() {},
  methods: {
    getMoney(val) {
      this.money = val;
    },
    open() {
      let moneys;
      if (this.money == 2) {
        moneys = 9.9;
      } else if (this.money == 3) {
        moneys = 29.8;
      } else {
        moneys = 298;
      }
      // this.account();
      if (this.money == "") {
        this.$toast("请选择充值金额");
        return;
      } else {
        let obj = {
          description: "充值",
          unitPrice: moneys,
          openid: JSON.parse(sessionStorage.getItem("userWxData")).openid,
          userId: sessionStorage.getItem("agentId"),
          userType: 2,
          count: 1,
          type: 1,
        };
        this.$api
          .getWxConfig(obj)
          .then((response) => {
            if (response.code == 0) {
              this.data = response.data;
              this.weixinPay();
            } else {
              this.$toast(response.msg);
            }
          })
          .catch((error) => {
            this.$toast("请求失败", +error);
          });
      }
    },
    //解决微信内置对象报错
    weixinPay() {
      var that = this;
      if (typeof WeixinJSBridge == "undefined") {
        if (document.addEventListener) {
          document.addEventListener(
            "WeixinJSBridgeReady",
            that.onBridgeReady(),
            false
          );
        } else if (document.attachEvent) {
          document.attachEvent("WeixinJSBridgeReady", that.onBridgeReady());
          document.attachEvent("onWeixinJSBridgeReady", that.onBridgeReady());
        }
      } else {
        that.onBridgeReady();
      }
    },
    //微信内置浏览器类，weChatParameter对象中的参数是3.步骤代码中从后端获取的数据
    onBridgeReady() {
      var that = this;
      WeixinJSBridge.invoke(
        "getBrandWCPayRequest",
        {
          debug: true,
          appId: that.data.appId, //公众号名称，由商户传入
          timeStamp: that.data.timeStamp, //时间戳，自1970年以来的秒数
          nonceStr: that.data.nonceStr, //随机串
          package: that.data.package,
          signType: that.data.signType, //微信签名方式：
          paySign: that.data.paySign, //微信签名
          jsApiList: ["chooseWXPay"],
        },
        function(res) {
          // 使用以上方式判断前端返回,微信团队郑重提示：res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
          if (res.err_msg == "get_brand_wcpay_request:ok") {
            that.$api
              .accountRenewal({
                account: sessionStorage.getItem("agentId"),
                deadType: that.money,
              })
              .then((result) => {
                if (result.code !== 0) {
                  return;
                }
                // 支付成功后的操作
                that.$toast({
                  message: "支付成功",
                  duration: 2000,
                });
                that.show = false;

                that.$router.push({
                  path: "/index?account=" + sessionStorage.getItem("agentId"),
                });
              });
          } else if (res.err_msg == "get_brand_wcpay_request:cancel") {
            //取消支付的操作
            that.$toast({
              message: "取消支付",
              duration: 2000,
            });
            that.show = false;
          } else {
            //支付失败的操作
            that.$toast({
              message: "支付失败",
              duration: 2000,
            });
            that.show = false;
          }
        }
      );
    },
    account() {
      this.$api
        .accountRenewal({
          account: sessionStorage.getItem("agentId"),
          deadType: this.money,
        })
        .then((result) => {
          if (result.code !== 0) {
            return;
          }
          // 支付成功后的操作
          this.$toast({
            message: "支付成功",
            duration: 2000,
          });
          this.show = false;

          this.$router.push({
            path: "/index?account=" + sessionStorage.getItem("agentId"),
          });
        });
    },
  },
};
</script>
<style scoped lang="less">
/* @import url(); 引入css类 */
.default {
  text-align: center;
  img {
    margin-top: 100px;
    width: 166px;
    height: 114px;
  }
  p {
    margin-top: 35px;
    font-size: 16px;
    color: #3556cd;
  }
  .btn {
    position: fixed;
    bottom: 100px;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: center;
    button {
      width: 321px;
      height: 41px;
      background-color: #477fe6;
      border-radius: 20px;
      font-size: 13px;
      color: #ffffff;
      border: none;
    }
  }
}

/deep/ .van-dialog__header {
  box-sizing: border-box;
  display: flex;
  height: 43px;
  justify-content: center;
  align-items: center;
  position: relative;
  border-bottom: 1px solid #f7f7f7;
  padding-bottom: 15px;
  h3 {
    font-size: 16px;
    font-weight: 700;
    color: #333333;
    letter-spacing: 1px;
  }
  .van-icon {
    position: absolute;
    right: 20px;
  }
}
.van-dialog {
  width: 345px;
  .cont {
    margin-top: 15px;
    font-size: 14px;
    font-weight: 700;
    color: #353535;
    text-align: center;

    .van-divider {
      margin: 0;
    }
    .foot {
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 10px 0 16px;
      button {
        width: 192px;
        height: 39px;
        background-color: #477fe6;
        border-radius: 20px;
        border: none;
        font-size: 13px;
        color: #ffffff;
      }
    }
    .main-items {
      display: flex;
      padding: 10px;
      .main-item {
        width: 32%;
        height: 60px;
        border: 1px solid gainsboro;
        border-radius: 0.21em;
        margin-left: 12px;
        display: flex;
        justify-content: center;
        align-items: center;
        img {
          width: 15px;
          height: 15px;
          margin-top: 0px;
          margin-right: 3px;
        }
      }
      .hover {
        width: 32%;
        height: 60px;
        background-image: url("../../assets/images/wallet/xuanzhongxiaoguo.png");
        background-repeat: no-repeat;
        background-size: 100% 100%;
        margin-left: 12px;
        display: flex;
        justify-content: center;
        align-items: center;
        img {
          width: 15px;
          height: 15px;
          margin-top: 0px;
          margin-right: 3px;
        }
      }
    }
    .tixianshuoming {
      margin-bottom: 25px;
      span {
        margin: 10px;
        display: block;
        font-size: 14px;
        color: #333333;
        text-align: left;
      }
      .bottom {
        display: flex;
        margin-left: 12px;

        i {
          display: inline-block;
          width: 8px;
          height: 8px;
          background: #477fe6;
          border-radius: 50%;
        }
        p {
          flex: 1;
          font-size: 10px;
          color: #4b4b4b;
          line-height: 19px;
          text-align: left;
          margin-top: -5px;
          margin-left: 5px;
          padding-right: 5px;
        }
      }
    }
    .contents {
      width: 100%;
      height: 90px;
      background: #fff;
      margin-top: -14px;
      line-height: 35px;
      span {
        margin: 10px;
        display: block;
        font-size: 14px;
        color: #333333;
        text-align: left;
      }
      /deep/.van-radio__label {
        display: flex;
      }
      .wxbtn {
        width: 40%;
        height: 34px;
        border-radius: 10px;
        margin-top: 10px;
        margin-left: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
        span {
          margin-left: 6px;
          font-size: 14px;
          // color: #fff;
        }
        img {
          width: 20px;
          height: 20px;
          margin-top: 9px;
        }
      }
    }
  }
}
</style>
